<template>
  <ag-grid-vue
    ref="grid"
    :columnDefs="columnDefs"
    :rowData="rowData"
    :editable="true"
    :style="{ height: gridHeight }"
    :pagination="false"
    :getRowNodeId="function(params){return params.AutoId}"
    class="ag-theme-material"
    @grid-ready="onGridReady"
  ></ag-grid-vue>
</template>
<script>
import BooleanRenderer from '@/components/CellRenderer/BooleanRenderer.vue'
import ModuleRenderer from '@/components/CellRenderer/ModuleRenderer.vue'
import BooleanEditor from '@/components/CellEditor/BooleanEditor.vue'
import ModuleEditor from '@/components/CellEditor/ModuleEditor.vue'

import { AgGridVue } from 'ag-grid-vue'
export default {
  components: {
    BooleanRenderer,
    AgGridVue,
    ModuleRenderer,
    BooleanEditor,
    ModuleEditor
  },
  props: ['rowData'],
  data() {
    return {
      frameworkComponents: null,
      gridHeight: '',
      gridApi: null,
      columnApi: null,
      //rowData: null,
      columnDefs: [
        { headerName: '', field: 'chk', width: 50, checkboxSelection: true },
        {
          headerName: '模块',
          field: 'Module',
          sortable: true,
          filter: true,
          editable: true,
          cellRendererFramework: 'ModuleRenderer',
          cellEditorFramework: 'ModuleEditor'
        },
        {
          headerName: '执行',
          field: 'Exec',
          sortable: true,
          filter: true,
          cellRendererFramework: 'BooleanRenderer',
          cellEditorFramework: 'BooleanEditor',
          editable: true
        },
        {
          headerName: '创建',
          field: 'Create',
          sortable: true,
          filter: true,
          cellRendererFramework: 'BooleanRenderer',
          cellEditorFramework: 'BooleanEditor',
          editable: true
        },
        {
          headerName: '删除',
          field: 'Delete',
          sortable: true,
          filter: true,
          cellRendererFramework: 'BooleanRenderer',
          cellEditorFramework: 'BooleanEditor',
          editable: true
        },
        {
          headerName: '审核',
          field: 'Approve',
          sortable: true,
          filter: true,
          cellRendererFramework: 'BooleanRenderer',
          cellEditorFramework: 'BooleanEditor',
          editable: true
        },
        {
          headerName: '反审',
          field: 'UnApprove',
          sortable: true,
          filter: true,
          cellRendererFramework: 'BooleanRenderer',
          cellEditorFramework: 'BooleanEditor',
          editable: true
        },
        {
          headerName: '扩展1',
          field: 'Func1',
          sortable: true,
          filter: true,
          cellRendererFramework: 'BooleanRenderer',
          cellEditorFramework: 'BooleanEditor',
          editable: true
        },
        {
          headerName: '扩展2',
          field: 'Func2',
          sortable: true,
          filter: true,
          cellRendererFramework: 'BooleanRenderer',
          cellEditorFramework: 'BooleanEditor',
          editable: true
        },
        {
          headerName: '扩展3',
          field: 'Func3',
          sortable: true,
          filter: true,
          cellRendererFramework: 'BooleanRenderer',
          cellEditorFramework: 'BooleanEditor',
          editable: true
        },
        {
          headerName: '扩展4',
          field: 'Func4',
          sortable: true,
          filter: true,
          cellRendererFramework: 'BooleanRenderer',
          cellEditorFramework: 'BooleanEditor',
          editable: true
        }
      ]
    }
  },
  methods: {
    onGridReady(params) {
      this.gridApi = params.api
      this.columnApi = params.columnApi
    },
    getSelected() {
      const selectedNodes = this.gridApi.getSelectedNodes()
      const selectedData = selectedNodes.map(node => node.data)
      return selectedData
    }
  },
  mounted() {
    this.gridHeight = window.innerHeight - 265 + 'px'
    const that = this
    window.onresize = function changeGridSize() {
      that.gridHeight = window.innerHeight - 265 + 'px'
    }
  }
}
</script>

<style lang="scss">
@import "../../../node_modules/ag-grid-community/dist/styles/ag-grid.css";
@import "../../../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css";
@import "../../../node_modules/ag-grid-community/dist/styles/ag-theme-material.css";
</style>
